// 翻译结果渲染模块 - 负责将翻译后的内容渲染到页面上

// 全局变量，用于跟踪翻译界面元素
let translationContainer = null;
let originalContent = null;

// 导入加载状态管理函数
import {
  hideLoading,
  showDownloadingMessage,
  hideDownloadingMessage,
  showSuccessMessage,
  showErrorMessage,
} from "./loading";

// 调试辅助函数
function debug(message, data) {
  const prefix = "[DeepSeek渲染]";
  if (data !== undefined) {
    console.log(`${prefix} ${message}`, data);
  } else {
    console.log(`${prefix} ${message}`);
  }
}

// 渲染翻译结果
export async function renderTranslation(translatedContent) {
  try {
    debug("开始渲染翻译结果");
    // 获取显示模式设置
    const { displayMode } = await getSettings();
    debug("显示模式", displayMode);

    // 如果已存在翻译容器，先移除它
    removeExistingTranslation();

    // 保存原始内容，用于恢复
    saveOriginalContent();

    // 根据显示模式渲染内容
    if (displayMode === "replace") {
      debug("使用替换模式渲染");
      renderReplacementMode(translatedContent);
    } else {
      debug("使用双语对照模式渲染");
      renderSideBySideMode(translatedContent);
    }

    // 添加控制按钮
    addControlButtons();
    debug("渲染完成");

    return true;
  } catch (error) {
    console.error("渲染翻译内容时出错:", error);
    debug("渲染出错", error);
    throw error;
  }
}

// 获取设置
async function getSettings() {
  debug("获取显示模式设置");
  return new Promise((resolve) => {
    chrome.storage.sync.get(["displayMode"], (result) => {
      resolve({
        displayMode: result.displayMode || "replace",
      });
    });
  });
}

// 删除现有的翻译界面
function removeExistingTranslation() {
  debug("尝试移除现有翻译界面", {
    hasContainer: !!translationContainer,
    inDOM: translationContainer && document.body.contains(translationContainer),
  });

  // 移除对比页面容器
  if (translationContainer && document.body.contains(translationContainer)) {
    document.body.removeChild(translationContainer);
    translationContainer = null;
    debug("翻译容器已移除");
  }

  // 检查是否存在替换模式下的翻译包装器
  const translationWrapper = document.getElementById(
    "deepseek-translation-wrapper"
  );
  if (translationWrapper) {
    // 如果找到包装器，则说明是替换模式
    debug("找到替换模式下的翻译包装器，准备移除");

    // 如果有父元素，则从父元素中移除
    if (translationWrapper.parentElement) {
      translationWrapper.remove();
      debug("替换模式下的翻译包装器已移除");
    }
  }

  // 如果存在原始内容并且当前处于替换模式，恢复原始内容
  if (originalContent) {
    const mainContent = findMainContentElement();
    if (mainContent) {
      debug("恢复原始内容");
      mainContent.innerHTML = originalContent;
      originalContent = null;
    }
  }
}

// 保存原始内容
function saveOriginalContent() {
  const mainContent = findMainContentElement();
  if (mainContent && !originalContent) {
    originalContent = mainContent.innerHTML;
    debug("已保存原始内容", { contentLength: originalContent.length });
  } else {
    debug("无法保存原始内容", {
      hasMainContent: !!mainContent,
      hasOriginalContent: !!originalContent,
    });
  }
}

// 查找主要内容元素
function findMainContentElement() {
  debug("开始查找主要内容元素");
  // 常见的文章内容容器选择器
  const selectors = [
    "article",
    ".article",
    ".post",
    ".entry",
    ".content",
    ".post-content",
    '[itemprop="articleBody"]',
    ".article-content",
    ".article__content",
    ".main-content",
    ".entry-content",
    "#article",
    "#content",
    "#post-content",
    ".blog-post",
    ".story-body",
  ];

  for (const selector of selectors) {
    const elements = document.querySelectorAll(selector);
    // 选择文本量最多的元素
    let bestElement = null;
    let maxTextLength = 0;

    for (const element of elements) {
      const textLength = element.textContent.trim().length;
      if (textLength > maxTextLength) {
        maxTextLength = textLength;
        bestElement = element;
      }
    }

    if (bestElement) {
      debug("找到主要内容元素", { selector, textLength: maxTextLength });
      return bestElement;
    }
  }

  // 如果找不到合适的元素，返回body
  debug("未找到特定内容元素，使用body");
  return document.body;
}

// "替换原文"模式的渲染
function renderReplacementMode(translatedContent) {
  debug("开始替换原文模式渲染");
  const mainContent = findMainContentElement();

  // 保存原始内容以便添加控制面板
  const originalMainContent = mainContent.innerHTML;

  // 创建一个包装器，包含控制面板和翻译内容
  const wrapperContent = `
    <div id="deepseek-translation-wrapper">
      <div id="deepseek-control-panel" style="
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        background-color: #f5f5f5;
        border-bottom: 1px solid #ddd;
        margin-bottom: 20px;
      ">
        <h2 style="margin: 0; font-size: 18px;">DeepSeek 翻译</h2>
        <div id="deepseek-button-group" style="display: flex; gap: 10px;"></div>
      </div>
      <div id="deepseek-translated-content">
        ${sanitizeHtml(translatedContent)}
      </div>
    </div>
  `;

  // 替换内容
  mainContent.innerHTML = wrapperContent;

  // 添加控制按钮
  addControlButtonsToPanel(document.getElementById("deepseek-button-group"));

  debug("内容已替换，控制面板已添加");

  // 滚动到页面顶部
  window.scrollTo(0, 0);
  debug("页面已滚动到顶部");
}

// 添加控制按钮到指定面板
function addControlButtonsToPanel(buttonContainer) {
  debug("添加控制按钮到面板");

  if (!buttonContainer) {
    debug("无法添加控制按钮，按钮容器不存在");
    return;
  }

  // 添加下载按钮
  const downloadButtons = [{ label: "下载PDF", format: "pdf" }];

  downloadButtons.forEach(({ label, format }) => {
    const button = document.createElement("button");
    button.textContent = label;
    button.style.cssText = `
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
      cursor: pointer;
    `;

    button.addEventListener("click", () => {
      debug(`点击了${format}下载按钮`);
      // 显示下载中提示
      showDownloadingMessage(format);
      chrome.runtime.sendMessage(
        {
          action: "download",
          format: format,
          title: document.title,
        },
        (response) => {
          // 隐藏下载中提示
          hideDownloadingMessage();

          // 根据响应显示成功或失败提示
          if (response && response.success) {
            showSuccessMessage(`PDF文件下载成功`);
          } else {
            showErrorMessage(response?.error || `PDF文件下载失败`);
          }
        }
      );
    });

    buttonContainer.appendChild(button);
  });

  // 添加关闭按钮
  const closeButton = document.createElement("button");
  closeButton.textContent = "关闭";
  closeButton.style.cssText = `
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
  `;

  closeButton.addEventListener("click", () => {
    debug("点击了关闭按钮");
    closeTranslation();
  });

  buttonContainer.appendChild(closeButton);
  debug("控制按钮已添加到面板");
}

// "双语对照"模式的渲染
function renderSideBySideMode(translatedContent) {
  debug("开始双语对照模式渲染");
  // 创建一个全屏覆盖层
  translationContainer = document.createElement("div");

  translationContainer.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    z-index: 9999;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
  `;

  // 创建标题栏
  const titleBar = document.createElement("div");
  titleBar.style.cssText = `
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
  `;

  // 添加标题
  const title = document.createElement("h2");
  title.textContent = "DeepSeek 翻译";
  title.style.margin = "0";

  titleBar.appendChild(title);
  translationContainer.appendChild(titleBar);
  debug("添加了标题栏");

  // 创建内容区域
  const contentContainer = document.createElement("div");
  contentContainer.style.cssText = `
    display: flex;
    flex: 1;
    overflow: hidden;
  `;

  // 原文内容
  const originalContentDiv = document.createElement("div");
  originalContentDiv.style.cssText = `
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    border-right: 1px solid #ddd;
  `;
  originalContentDiv.innerHTML = originalContent;

  // 翻译内容
  const translatedContentDiv = document.createElement("div");
  translatedContentDiv.style.cssText = `
    flex: 1;
    padding: 20px;
    overflow-y: auto;
  `;
  translatedContentDiv.innerHTML = sanitizeHtml(translatedContent);
  debug("添加了原文和翻译内容");

  // 同步滚动处理
  originalContentDiv.addEventListener("scroll", () => {
    const scrollPercentage =
      originalContentDiv.scrollTop /
      (originalContentDiv.scrollHeight - originalContentDiv.clientHeight);
    translatedContentDiv.scrollTop =
      scrollPercentage *
      (translatedContentDiv.scrollHeight - translatedContentDiv.clientHeight);
  });

  translatedContentDiv.addEventListener("scroll", () => {
    const scrollPercentage =
      translatedContentDiv.scrollTop /
      (translatedContentDiv.scrollHeight - translatedContentDiv.clientHeight);
    originalContentDiv.scrollTop =
      scrollPercentage *
      (originalContentDiv.scrollHeight - originalContentDiv.clientHeight);
  });
  debug("设置了同步滚动");

  contentContainer.appendChild(originalContentDiv);
  contentContainer.appendChild(translatedContentDiv);

  translationContainer.appendChild(contentContainer);
  document.body.appendChild(translationContainer);
  debug("双语对照界面已添加到DOM");
}

// 添加控制按钮（关闭、下载等）
function addControlButtons() {
  debug("开始添加控制按钮");
  if (!translationContainer) {
    debug("无法添加控制按钮，翻译容器不存在");
    return;
  }

  // 找到标题栏
  const titleBar = translationContainer.querySelector("div");

  // 创建按钮组
  const buttonGroup = document.createElement("div");
  buttonGroup.style.cssText = `
    display: flex;
    gap: 10px;
  `;

  // 添加按钮到按钮组
  addControlButtonsToPanel(buttonGroup);

  // 添加按钮组到标题栏
  titleBar.appendChild(buttonGroup);
}

// 关闭翻译界面
function closeTranslation() {
  debug("关闭翻译界面");

  // 移除翻译界面
  removeExistingTranslation();

  // 确保加载状态也被隐藏
  hideLoading();
  debug("翻译界面和加载状态都已隐藏");
}

// 清理HTML内容，防止XSS攻击
function sanitizeHtml(html) {
  debug("开始清理HTML内容");
  const tempDiv = document.createElement("div");
  tempDiv.innerHTML = html;

  // 移除所有script标签
  const scripts = tempDiv.querySelectorAll("script");
  scripts.forEach((script) => script.remove());

  // 移除onclick等事件属性
  const allElements = tempDiv.querySelectorAll("*");
  const eventAttributes = [
    "onclick",
    "onmouseover",
    "onmouseout",
    "onload",
    "onerror",
    "onchange",
    "onsubmit",
  ];

  allElements.forEach((el) => {
    eventAttributes.forEach((attr) => {
      if (el.hasAttribute(attr)) {
        el.removeAttribute(attr);
      }
    });

    // 清理href属性中的javascript:
    if (
      el.tagName === "A" &&
      el.href &&
      el.href.toLowerCase().startsWith("javascript:")
    ) {
      el.href = "#";
    }
  });

  debug("HTML内容已清理");
  return tempDiv.innerHTML;
}

// 导出恢复原始内容的方法
export function restoreOriginalContent() {
  debug("恢复原始内容");
  closeTranslation();
}
